﻿<template>
    <!-- 地图内容 -->
    <div class="fd-map-wrapper">
        <!-- 柱状图的容器 -->
        <div class="fd-map-drag-wrapper" ref="dragContain">
            <!-- 地图绘制容器 -->
            <div class="fd-map-render-wrapper" ref="map" v-html="svgData"></div>
        </div>
        <!-- fd-map-drag-wrapper end -->
        <!-- 图例 -->
        <div class="fd-legend-wrapper" :class="{'fd-has-time-line': hasTimeline}" v-if="legendData && legendData.length">
            <!-- 图片 -->
            <img src="./images/img-legend.png" alt="" class="fd-legend">
            <!-- 文本 -->
            <ul class="fd-text-list" :class="{'three': legendData.length==3}">
                <li class="fd-text" v-for="(item,index) in legendData" :key="index" v-text="item+(isShowDataText?'':'%')"></li>
            </ul>
            <!-- fd-text-list -->
            <!-- 图例名称 -->
            <p class="fd-legend-tit" v-text="legendName"></p>
        </div>
    </div>
    <!-- fd-map-wrapper end -->
</template>

<!--<script src="./color.js"></script>-->
<script type="text/ecmascript-6">
  import Color from './extend/color'
  import iconArrowUp from './images/icon-up-arrow.png'
  import iconArrowDown from './images/icon-down-arrow.png'
  import imgCircle from './images/img-map-circle.png'
//   import touchHandler from './extend/touchHandler'
  import mapHandler from './extend/mapHandler'

  export default {
    name: "appCommonHeatMap",
    props: {
        lineStrokeColor:{
            type:String,
            default:'#365d8a'
        },
      heatMapCanClick:{
      	type: Boolean,
        default: false
      },
      //isHideZeroText
      isHideZeroText:{
      	type: Boolean,
        default: false
      },
      // 是否有时间轴
      hasTimeline: {
        type: Boolean,
        default: true
      },
      // 图例名称
      legendName: {
        type: String
      },
      // 地图id
      mapId: {
        type: String,
        default: 'qy'
      },
      // 地图svg
      svgData: {
        type: String,
        required: true
      },
      // 数据
      mapData: {
        type: Array,
        required: true
      },
      // 默认pointerEvents值
      svgPointerEvents: {
        type: String,
        default: 'auto'
      },
      // 地图参数
      mapStyle: {
        type: Object,
        default() {
          return {
            // 区域地图
            areaMap: {
              fill: 'rgba(20,167,209)',
              stroke: 'rgba(89,34,0,1)',
              activeStroke: '#0095dc',
              // activeStroke: 'rgba(0,0,255,1)',
              strokeWidth: 1,
              hoverFill: 'rgba(25,167,253,1)',
              activeFill: '#facc43'
            },
            circle: {
              stroke: 'rgba(0,70,156,1)',
              r: 3,
              fill: '#fff45c'
            },
            textStyle: {
              fontSize: 24,
              fill: '#4d2502',
              hoverFill: '#fff'
            },
            lineStyle: {
              stroke: '#dfc6bd',
              strokeWidth: 2
            },
            // 数据文本
            dataTextStyle: {
              fontSize: 24,
              fill: '#3d1f15',
              hoverFill: '#fff'
            }
          }
        }
      },
      // 区域地图颜色
      areaMapColor: {
        type: Array,
        default() {
          return ['#ff7f50', '#87cefa', '#da70d6']
        }
      },
      gray: {
        type: String,
        default: 'rgba(128,128,128,1)'
      },
      grayStroke: {
        type: String,
        default: '#333'
      },
      // 是否显示区域名字
      isShowNameText: {
        type: Boolean,
        default: true
      },
      // 是显示数字名字还是百分比
      isShowDataText: {
        type: Boolean,
        default: false
      },
      // 是否能下钻到街乡镇
      isXzJxz: {
        type: Boolean,
        default: false
      },
      // 文本偏移量
      textNameOffset: {
        type: Number,
        default: 50
      },
      textNameOffsetLine: {
        type: Number,
        default: 5
      },
      // mapid 的前缀
      mapidPrefix: {
        type: String,
        default: 'js-mapid-'
      },
      // 颜色拆分的粒度
      STEPS: {
        type: Number,
        default: 16
      },
      // 点击事件
      clickCallback: {
        type: Function,
        default(event, _this, data) {
        }
      },
      // 双击事件
      dblclickCallback: {
        type: Function,
        default(event, _this, dataList) {
        }
      },
      // 加载完执行的回调函数
      readyCallback: {
        type: Function,
        default(event, _this, dataList) {
        }
      },
      // 活跃的回调函数
      activeCallback: {
        type: Function,
        default (event, _this, dataList) {
        }
      },
      // 更新数据的回调函数
      updateCallback: {
        type: Function,
        default (event, _this, dataList) {
        }
      }
    },
    data() {
      return {
        overlapStreet:[
            //重叠新街乡镇
            //'110112210',
            '110106017',
            '110106018',
            '110106019',
            '110106020'
        ],
        overlapOldStreet:[
            //重叠旧街乡镇
            //'110112119',
            '110106011',
            '110106004',
            '110106010',
            '110106008'
        ],
        //新街乡镇对应旧街乡镇
        // '110112210':{
        //     code:'110112119'
        // },
        '110106017':{
            code:'110106011'
        },
        '110106018':{
            code:'110106004'
        },
        '110106019':{
            code:'110106010'
        },
        '110106020':{
            code:'110106008'
        },
        
        //旧街乡镇对应新街乡镇
        // '110112119':{
        //     code:'110112210'
        // },
        '110106011':{
            code:'110106017'
        },
        '110106004':{
            code:'110106018'
        },
        '110106010':{
            code:'110106019'
        },
        '110106008':{
            code:'110106020'
        },
        snap: null, // 地图snap对象
        mapContain: null, // 地图容器
        perspectiveGroup: null, // 透视图组
        viewBox: null, // 地图视窗
        mapRatio: 0, // 地图的比值
        mapStyleFontSize: 0, // 地图字体大小
        mapStyleDataFontSize: 0, // 地图数据字体大小
        mapStyleCircleR: 0, // 圆半径
        mapStyleStrokeWidth: 0, // 地图边框粗细
        mapStyleLineStrokeWidth: 0,
        strokeDasharray: 0,
        strokeDashoffset: 0,
        scale: 1, // 缩放比例
        // 地图区域最大值
        areaMapMaxValue: 0,
        // 地图区域最小值
        areaMapMinValue: 0,
        // 圆圈图片宽
        circleImgW: 188,
        // 圆圈图片高
        circleImgH: 188,
        highLineStroke: '#f00',
        highLineStrokeWidth: 3,
        // 区域线条样式
        areaLineStyle: {
          x1: 140,
          x2: 100,
          y: 100
        },
        areaMapDataSource: [], // 地图数据
        areaMapBj: null, // 区域背景
        areaMap: {}, // 地图区域
        areaMapData: {}, //地图数据
        areaMapText: {}, // 地图区域文本
        areaMapDataTextGroup: null, // 数据文本整体组
        areaMapDataText: {}, // 数据文本
        areaMapCircle: {}, // 中心点
        areaMapCircleImgGroup: null, // 圆
        areaMapCircleImg: {}, // 中心圆图片
        areaMapLine: {}, // 地图线条
        areaMapHighLineGroup: null, // 高亮的地图线组
        areaMapHighLine: {},    // 高亮的地图线对象
        activeAreaMap: null, // 激活的区域
        highLightAreaMap: null, // 高亮的区域
        // 图例数据
        legendData: []
      }
    },
    computed: {
      // 是否生成数据文本
      generateDataText () {
        return this.mapId.indexOf('qy')>-1? true : false
      }
    },
    watch: {
      /**
       * 监听svg的变化
       * */
      svgData(newValue, oldValue) {
        this.$nextTick(() => {
          this.initial()
        })
      },
      // 监听地图数据变化
      mapData(newValue, oldValue) {
        // 更新地图
        this.updateData(newValue)
      }
    },
    // 混入
    mixins: [
      mapHandler
    ],
    methods: {
      /**
       * 初始化方法
       * */
      initial() {
        console.time('time')
        var _this = this;

        // 销毁 重置一下变量
        _this.destory()

        // 初始化snap对象
        this.initSnap()

        // 初始化参数,全局可以访问的所有变量
        _this.initParams()

        // 创建提示框
        // _this.creatTipBox();
        // 初始化地图，这里会获取到所有的区域地图对象，和中心点对象
        _this.initialAreaMap();
        // 如果存在线，那么线应该在圆圈之前
        if (_this.areaMapLineGroup) {
          _this.snap.select('#js-circle-gourp').before(_this.areaMapLineGroup)
        }
        // 增加交互效果
        _this.addAreaMapInteraction();
        // 更新数据
        _this.updateData(_this.mapData)
        // 重置样式
        // this.resetStyle()
        // 点击之后的回调函数
        if (Object.prototype.toString.call(_this.readyCallback) == '[object Function]') {
          _this.readyCallback()
        }
        /*      // 显示地图
         _this.snap.attr({
         'visibility' : 'visible'
         });*/
        // 第一次更新数据
        //  _this.updateData();
        console.timeEnd('time')
      },
      // 初始化Snap对象
      initSnap() {
        // 地图snap对象赋值
        this.snap = Snap('#jsSvg' + this.mapId);

        // 地图容器
        this.mapContain = this.$el;

        // 设置默认的pointer-events属性
        this.snap.attr({
          width: '100%',
          height: '100%',
          'pointer-events': this.svgPointerEvents
        });
      },
      // 初始化参数
      initParams: function () {
        var _this = this;
        var snap = _this.snap;
        // 是否显示错误日志
        //  perspective group 组
        _this.perspectiveGroup = _this.snap.select('#js-perspective-group');
        // 视窗对象
        _this.viewBox = _this.snap.attr('viewBox');
        // 地图的比值
        _this.mapRatio = _this.mapId==='110112' ? _this.getMapRatio()*1.7 : _this.getMapRatio();
        // 根据不同的尺寸设置不同的样式
        _this.changeMapStyle();// 背景
        _this.areaMapBj = _this.snap.select('#js-svg-bg')
        if (_this.areaMapBj) {
          let _shadow = _this.snap.paper.filter(Snap.filter.shadow(0, 0, 30, '#000', 1))
          _this.areaMapBj.attr({
            fill: 'rgba(128, 128, 128,0.8)',
            stroke: 'rgba(242,255,100,0.8)',
            strokeWidth: 2 * _this.mapRatio,
            filter: _shadow
          })
        }
        let _lineGroup = _this.snap.select('#js-map-line-group')
        if (_lineGroup) {
          _lineGroup.selectAll('polyline').attr({
            fill: 'none',
            stroke: '#365d8a',
            strokeWidth: 3 * _this.mapRatio,
          })
        }
      },
      // 设置缩放大小
      setScale: function (scale) {
        // 如果没有缩放，则跳出函数
        if(scale == this.scale) {
          return
        }
        this.scale = scale;
        // 获取比率
        this.mapRatio =  this.mapId === '110112' ? this.getMapRatio()*1.7 : this.getMapRatio();
        // 更新地图样式
        this.updateMapStyle()
      },
      // 获取地图的比值
      getMapRatio: function () {
        var _this = this;
        var _mapContain = _this.mapContain;
        var _scale = this.scale;
        // var _relativeWidth = _mapContain.clientWidth * _scale;
        var _relativeWidth = $(window).width() * _scale;
        var _relativeHeight = $(window).height() * _scale;
        // var _relativeHeight = _mapContain.clientHeight * _scale;
        let _ratio = Math.min(_this.viewBox.width / _relativeWidth, _this.viewBox.height / _relativeHeight)
        // 如果是pc端则直接返回ratio，否则移动端取其2/3
        if($(window).width() > 1280) {
          return _ratio
        }
        // alert('上一次ratio:' + this.mapRatio + ' 这一次ratio' + _ratio)
        return _ratio * 2 / 3;
      },
      // 修改地图外观参数
      changeMapStyle: function () {
        var _this = this;
        // 设置地图字体大小
        _this.mapStyleFontSize = _this.mapStyle.textStyle.fontSize * _this.mapRatio;
        // 设置地图数据字体大小
        _this.mapStyleDataFontSize = _this.mapStyle.dataTextStyle.fontSize * _this.mapRatio;
        // 圆半径
        _this.mapStyleCircleR = _this.mapStyle.circle.r * _this.mapRatio;
        //areaMap边框
        _this.mapStyleStrokeWidth = _this.mapStyle.areaMap.strokeWidth * _this.mapRatio;
        //areaMapLine 边框
        _this.mapStyleLineStrokeWidth = _this.mapStyle.lineStyle.strokeWidth * _this.mapRatio;
        //dashArray 间距
        _this.strokeDasharray = 4 * _this.mapRatio;
        _this.strokeDashoffset = _this.mapRatio;
      },
      //  更新地图演示
      updateMapStyle: function () {
        var _this = this;
        // 更新样式
        this.changeMapStyle();
        // 更新背景颜色
        this.updateBjStyle()
        // 更新地图路径边框
        this.updateAreaMapStyle();
        //更新地图上的文字大小 （包含区域和数据文本）
        this.updateAreaMapTextStyle();
        // 更新地图线
        this.updateAreaMapLineStyle();
        // 更新地图上的圆半径
        this.updateAreaMapCircleImgStyle();
        //  debugger
        // 更新高亮的线条
        this.updateHighLineStyle()
      },
      // 更新高亮的线条样式
      updateHighLineStyle () {
        let _this = this
        if(this.areaMapHighLineGroup) {
          $.each(this.areaMapHighLine, (key, item) => {
            item.line.attr({
              strokeWidth: _this.highLineStrokeWidth * _this.mapRatio
            })
            item.circle.attr({
              x: item.line.attr('points')[0] - _this.circleImgW * _this.mapRatio / 2,
              y: item.line.attr('points')[1] - _this.circleImgH * _this.mapRatio / 2,
              width: _this.circleImgW * _this.mapRatio,
              height: _this.circleImgH * _this.mapRatio
            })
          })
        }
      },
      /**
       * 更新背景样式
       * */
      updateBjStyle() {
        let _this = this
        if (_this.areaMapBj) {
          _this.areaMapBj.attr({
            strokeWidth: 3 * _this.mapRatio
          })
        }
      },
      // 更新地图路径边框
      updateAreaMapStyle: function () {
        var _this = this;
        $.each(_this.areaMap, function (name, value) {
          // 是区域块，需要进行循环绑定
          if (Array.isArray(value)) {
            value.forEach(function (item, index) {
              // 边线大小
              item.attr({
                strokeWidth: _this.mapStyleStrokeWidth
              })
            })
          } else {
            // 边线大小
            value.attr({
              strokeWidth: _this.mapStyleStrokeWidth
            })
          }
        })
      },
      // 更新地图上的圆半径
      updateAreaMapCircleImgStyle: function () {
        let _this = this
        if(this.areaMapCircleImgGroup) {
          $.each(this.areaMapCircleImg, (key, item) => {
            let _mapId = item.data('mapid')
            let _areaMapCircle = _this.areaMapCircle[_this.mapidPrefix + _mapId]
            item.attr({
              x: parseFloat(_areaMapCircle.attr('cx')) - _this.circleImgW * _this.mapRatio / 2,
              y: parseFloat(_areaMapCircle.attr('cy')) - _this.circleImgH * _this.mapRatio / 2,
              width: _this.circleImgW * _this.mapRatio,
              height: _this.circleImgH * _this.mapRatio
            })
          })
        }
      },
      // 更新地图上的文字大小 （包含区域和数据文本）
      updateAreaMapTextStyle: function () {
        var _this = this;
        var fontSize = _this.mapStyleFontSize;
        // 区域名称
        if (_this.areaMapText) {
          $.each(_this.areaMapText, function (name, value) {
            // 边线大小
            value.attr({
              'font-size': fontSize + 'px'
            })
          })
        }
        var dataTextfontSize = _this.mapStyleDataFontSize;
        // 数据
        $.each(_this.areaMapCircle, function (name, value) {
          var _self = value;
          var _id = _self.attr('class');
          var _mapId = value.data('mapid');;
          if (_this.isShowDataText) {
            if (_this.areaMapDataText[_this.mapidPrefix + _mapId]) {
              // 绘制数据
              _this.areaMapDataText[_this.mapidPrefix + _mapId].text.attr({
                y: parseFloat(value.attr('cy')) - _this.mapRatio * 38,
                'font-size': dataTextfontSize + 'px'
              })
            }
          } else {
            if (_this.areaMapDataText[_this.mapidPrefix + _mapId]) {
              // 设置单片区域的字体样式
              _this.setItemAreaTextStyle(parseFloat(value.attr('cx')), parseFloat(value.attr('cy')), _mapId)
            }
          }
        })
      },
      /**
       * 设置单片区域的文本样式
       * */
      setItemAreaTextStyle: function(x, y, mapId) {
        let _this = this
        let _rectWidth = 130
        let _rectX = x - (_rectWidth / 2) * _this.mapRatio
        // 圆点
        _this.areaMapDataText[_this.mapidPrefix + mapId].circle.attr({
          cx: _rectX + 12 * _this.mapRatio,
          cy: y - _this.mapRatio * _this.textNameOffset,
          r: 4 * _this.mapRatio
        })
        // 绘制箭头
        _this.areaMapDataText[_this.mapidPrefix + mapId].arrow.attr({
          x: _rectX + 25 * _this.mapRatio,
          y: y - _this.mapRatio * _this.textNameOffset - 21 * _this.mapRatio / 2,
          width: 11 * _this.mapRatio,
          height: 21 * _this.mapRatio
        })
        // 绘制数据
        _this.areaMapDataText[_this.mapidPrefix + mapId].text.attr({
          x: _rectX + 45 * _this.mapRatio,
          y: y - _this.mapRatio * _this.textNameOffset,
          'font-size': _this.mapStyleDataFontSize + 'px'
        })
        // 绘制数据
        _this.areaMapDataText[_this.mapidPrefix + mapId].rect.attr({
          x: _rectX,
          y: y - _this.mapRatio * _this.textNameOffset - 46 * _this.mapRatio / 2,
          width: _rectWidth * _this.mapRatio,
          height: 42 * _this.mapRatio,
          // filter: _shadow,
          rx: 4 * _this.mapRatio,
          ry: 4 * _this.mapRatio
        })
      },
      // 更新地图线
      updateAreaMapLineStyle: function () {
        var _this = this;
        if (_this.areaMapLine) {
          var _endCoords = [];
          var id = '';
          $.each(_this.areaMapLine, function (name, value) {
            var _mapId = value.data('mapid');
            // 获取象限的值
            let _quadrant = value.data('quadrant')
            let _areaMapCircle = _this.areaMapCircle[_this.mapidPrefix + _mapId]
            // 圆心坐标
            let _cx = parseFloat(_areaMapCircle.attr('cx')), _cy = parseFloat(_areaMapCircle.attr('cy'))
            let _coords = [[_cx, _cy]]
            // 中间点
            let _middleCoords = [_cx, _cy]
            // 结束点
            let _endCoords = [_cx, _cy]
            if(_quadrant == 1) {
              // 中间点
              _middleCoords[0] = _cx - _this.mapRatio * _this.areaLineStyle.x1
              _middleCoords[1] = _cy + _this.mapRatio * _this.areaLineStyle.y

              // 结束点
              _endCoords[0] = _middleCoords[0] - _this.mapRatio * _this.areaLineStyle.x2
              _endCoords[1] = _middleCoords[1]
            } else if (_quadrant == 2) {
              // 中间点
              _middleCoords[0] = _cx + _this.mapRatio * _this.areaLineStyle.x1
              _middleCoords[1] = _cy + _this.mapRatio * _this.areaLineStyle.y

              // 结束点
              _endCoords[0] = _middleCoords[0] + _this.mapRatio * _this.areaLineStyle.x2
              _endCoords[1] = _middleCoords[1]
            } else if (_quadrant == 3) {
              // 中间点
              _middleCoords[0] = _cx + _this.mapRatio * _this.areaLineStyle.x1
              _middleCoords[1] = _cy - _this.mapRatio * _this.areaLineStyle.y

              // 结束点
              _endCoords[0] = _middleCoords[0] + _this.mapRatio * _this.areaLineStyle.x2
              _endCoords[1] = _middleCoords[1]
            } else {
              // 中间点
              _middleCoords[0] = _cx - _this.mapRatio * _this.areaLineStyle.x1
              _middleCoords[1] = _cy - _this.mapRatio * _this.areaLineStyle.y

              // 结束点
              _endCoords[0] = _middleCoords[0] - _this.mapRatio * _this.areaLineStyle.x2
              _endCoords[1] = _middleCoords[1]
            }
            _coords.push(_middleCoords)
            _coords.push(_endCoords)
            value.attr({
              d: _this.getLinePathByCoord(_coords),
              strokeWidth: _this.highLineStrokeWidth * _this.mapRatio,
            })
          })
        }

      },
      // 初始化地图
      initialAreaMap: function () {
        console.time('time2')
        var _this = this;
        // 获取所有区域的对象
        $('#jsSvg' + _this.mapId + ' path[id^="' + _this.mapidPrefix + '"]').each(function (index, item) {
          var _self = $(this);
          var _id = _self.attr('id');
          var _mapId = _id.split('-')[2];
          var item = _this.snap.select('#' + _id);
          if(!_this.areaMap[_this.mapidPrefix + _mapId]) {
            _this.areaMap[_this.mapidPrefix + _mapId] = [];
          }
          // let _gradient = _this.snap.paper.gradient('r(0.5,0.5,0.5)#ff7e28-#ff531e')
          let _color = Color(_this.areaMapColor[0])
          let _gradient = _this.snap.paper.gradient('r(0.5,0.5,0.5)' + _color.lightenByRatio(0.1) + '-' + _color.darkenByRatio(0.2))
          // 设置path的style
          item.attr({
            stroke: _this.mapStyle.areaMap.stroke,
            strokeWidth: _this.mapStyleStrokeWidth,
            // fill : _this.mapStyle.areaMap.fill,
            fill: _gradient,
            cursor: 'pointer',
            'pointer-events': 'auto'
          })
          // 设置名称
            .data('name', item.attr('name'))
            .data('mapid', _mapId);
          _this.areaMap[_this.mapidPrefix + _mapId].push(item)
        });
        console.timeEnd('time2')
        console.time('time3')
        // 获取所有中心点的对象
        $('#jsSvg' + _this.mapId + ' circle[id^="' + _this.mapidPrefix + '"]').each(function (index, item) {
          var _self = $(this);
          var _id = _self.attr('id');
          var _mapId = _id.split('-')[2];
          try {
            // 不存在才需要赋值
            if (!_this.areaMapCircle[_this.mapidPrefix + _mapId]) {
              // 中心点对象
              _this.areaMapCircle[_this.mapidPrefix + _mapId] = _this.snap.select('#' + _id);
              // 设置circle的style
              _this.areaMapCircle[_this.mapidPrefix + _mapId].attr({
                fill: _this.mapStyle.circle.fill,
                r: _this.mapStyleCircleR,
                pointerEvents: 'none',
                display: 'none'
              }).data('name',
                // 是区域块，取任意一块的值即可
                Array.isArray(_this.areaMap[_this.mapidPrefix + _mapId]) ?
                  _this.areaMap[_this.mapidPrefix + _mapId][0].attr('name') :
                  _this.areaMap[_this.mapidPrefix + _mapId].attr('name')
              ).data('mapid', _mapId);
            }
          } catch (e) {
            console.log(item)
          }
        });
        console.timeEnd('time3')
        var fontSize = _this.mapStyleFontSize;
        let _textGroup = _this.snap.paper.g().attr({
          id: 'js-areaMapText-group'
        })
        _this.perspectiveGroup.append(_textGroup);
        _textGroup.after(_this.snap.select('#js-circle-gourp'))
        // 东城、西城、石景山、丰台
        let _mapIdList = ['110101', '110102', '110106', '110107']
        // 获取所有中心点的对象
        $('#jsSvg' + _this.mapId + ' text[id^="' + _this.mapidPrefix + '"]').each(function (index, item) {
          var _self = $(this);
          var _id = _self.attr('id');
          var _mapId = _id.split('-')[2];
          try {
            // 不存在才需要赋值
            if (!_this.areaMapText[_this.mapidPrefix + _mapId]) {
              let _areaMapCircle = _this.areaMapCircle[_this.mapidPrefix + _mapId]
              // 中心点对象
              _this.areaMapText[_this.mapidPrefix + _mapId] = _this.snap.select('#' + _id);
              // 设置text的style
              _this.areaMapText[_this.mapidPrefix + _mapId].attr({
                'transform': 'none',
                x: parseFloat(_areaMapCircle.attr('cx')),
                y: parseFloat(_areaMapCircle.attr('cy')),
                'font-size': fontSize + 'px',
                fill: _mapIdList.indexOf(_mapId) > -1&&(!_this.isHideZeroText) ? '#fff' : _this.mapStyle.textStyle.fill,//对于只有部分热力的图专项，区名改为黑色
                fontFamily: 'Microsoft YaHei',
                'text-anchor': 'middle',
                'display':'none'
              }).data('name', _this.areaMapText[_this.mapidPrefix + _mapId].attr('text')).data('mapid', _mapId);
              _textGroup.append(_this.areaMapText[_this.mapidPrefix + _mapId])
              // 点击文本点击事件
              _this.bindAreaMapItemInteraction(_this.areaMapText[_this.mapidPrefix + _mapId])
            }
          } catch (e) {
            console.log(item)
          }
        });
        // 绘制地图高亮的圆
        _this.createAreaHighMapCircle()
        // 创建数据文本
        // _this.creatDataText();
        // 创建区域地图线条
        _this.createAreaMapLine()
        // 创建地图圆
        _this.createAreaMapCircleImg()
      },
      // 绘制地图高亮的圆
      createAreaHighMapCircle() {
        let _this = this;
        let _lineTotalGroup = _this.snap.select('#js-map-line-group')
        if (_lineTotalGroup) {
          _this.areaMapHighLineGroup = _lineTotalGroup
          _lineTotalGroup.selectAll('polyline').forEach((item, index) => {
            let _points = item.attr('points')
            let _mapId = item.attr('id').split('-')[2]
            _this.areaMapHighLine[_this.mapidPrefix + _mapId] = {}
            let _lineGroup = _this.snap.paper.g().attr({
              id: 'js-map-' + _mapId + '-high-line-group'
            })
            _lineTotalGroup.append(_lineGroup)
            _this.areaMapHighLine[_this.mapidPrefix + _mapId].group = _lineGroup

            item.attr({
              fill: 'none',
              // 地图延伸出来的线的颜色
              stroke: _this.lineStrokeColor,
              strokeWidth: 3 * _this.mapRatio
            })
            _lineGroup.append(item)
            _this.areaMapHighLine[_this.mapidPrefix + _mapId].line = item

            let _imgCircle = _this.snap.paper.el('image', {
              href: imgCircle,
              x: _points[0] - _this.circleImgW / 2 * _this.mapRatio,
              y: _points[1] - _this.circleImgH / 2 * _this.mapRatio,
              width: _this.circleImgW * _this.mapRatio,
              height: _this.circleImgH * _this.mapRatio,
              'user-select': 'none',
              'pointer-events': 'none'
            })
            _lineGroup.append(_imgCircle)
            _this.areaMapHighLine[_this.mapidPrefix + _mapId].circle = _imgCircle
          })
        }
      },
      // 创建文字
      creatDataText: function () {
        var _this = this;
        // 是否生成数据文本
        if(this.generateDataText) {
          _this.areaMapDataText = {};
          // 添加到组
          var _textGroup = _this.snap.paper.g().attr({
            id: 'js-areaMapDataText-group'
          });
          _this.perspectiveGroup.append(_textGroup);

          _this.areaMapDataTextGroup = _textGroup
          // 数据文本大小
          var fontSize = _this.mapStyleDataFontSize;

          $.each(_this.areaMapCircle, function (name, value) {
            var _self = value;
            var _id = _self.attr('id');
            var _mapId = _id.split('-')[2];
            // 不存在才需要赋值
            if (!_this.areaMapDataText[_this.mapidPrefix + _mapId]) {
              // 绘制数据
              _this.areaMapDataText[_this.mapidPrefix + _mapId] = {}

              let _dataTextGroup = _this.snap.paper.g().attr({
                id: 'js-areaMapDataText-group-' + _mapId,
                visibility: 'hidden'
              }).data('mapid', _mapId)
              _this.areaMapDataText[_this.mapidPrefix + _mapId].group = _dataTextGroup
              // 绑定点击事件
              _this.bindAreaMapItemInteraction(_this.areaMapDataText[_this.mapidPrefix + _mapId].group)
              //  添加到组
              _textGroup.append(_this.areaMapDataText[_this.mapidPrefix + _mapId].group);
           
              // 如果展现的数据文本
              if (_this.isShowDataText) {
                // 绘制数据
                let _text = _this.snap.paper.el('text', {
                  id: 'areaMapDataName-' + _mapId,
                  x: parseFloat(value.attr('cx')),
                  y: parseFloat(value.attr('cy')) - _this.mapRatio * 38,
                  // 处于点的下方,站位
                  text: '',
                  'font-size': fontSize + 'px',
                  fill: '#fff',
                  fontFamily: 'Microsoft YaHei',
                  textAnchor: 'middle',
                  'pointer-events': 'none',
                  dominantBaseline: 'middle'
                });
                _this.areaMapDataText[_this.mapidPrefix + _mapId].text = _text
                _dataTextGroup.append(_text)
              } else {
                // 绘制矩形
                let _shadow = _this.snap.paper.filter(Snap.filter.shadow(0, 1, 1))
                let _rect = _this.snap.paper.el('rect', {
                  fill: 'rgba(255,255,255,0.3)'
                })
                _this.areaMapDataText[_this.mapidPrefix + _mapId].rect = _rect
                _dataTextGroup.append(_rect)

                // 绘制圆点
                let _circle = _this.snap.paper.el('circle', {
                  fill: '#42a64e'
                })
                _this.areaMapDataText[_this.mapidPrefix + _mapId].circle = _circle
                _dataTextGroup.append(_circle)

                // 绘制箭头
                let _arrow = _this.snap.paper.el('image', {
                  // href: iconArrowUp,
                  href: iconArrowDown
                })
                _this.areaMapDataText[_this.mapidPrefix + _mapId].arrow = _arrow
                _dataTextGroup.append(_arrow)

                // 绘制数据
                let _text = _this.snap.paper.el('text', {
                  id: 'areaMapDataName-' + _mapId,
                  // 处于点的下方,站位
                  text: '',
                  // fill : '#bd1c12',
                  fill: '#fff',
                  // fill : _this.mapStyle.dataTextStyle.fill,
                  fontFamily: 'Microsoft YaHei',
                  'pointer-events': 'none',
                  'text-anchor': 'start',
                  dominantBaseline: 'middle',
                  /*  visibility : 'hidden'*/
                });
                _this.areaMapDataText[_this.mapidPrefix + _mapId].text = _text
                _dataTextGroup.append(_text)

                /*_this.areaMapDataText[_this.mapidPrefix + _mapId].group.attr({
                  transform: 'translateX(' + -_this.areaMapDataText[_this.mapidPrefix + _mapId].group.getBBox().width / 2 + ')'
                })*/
                // 设置单片区域的样式
                _this.setItemAreaTextStyle(parseFloat(value.attr('cx')), parseFloat(value.attr('cy')), _mapId)
              }
            }
          });
        }
      },
      // 创建文字
      creatNameText: function () {
        var _this = this;
        _this.areaMapText = {};
        // 添加到组
        var _textGroup = _this.snap.paper.g().attr({
          id: 'js-areaMapText-group'
        });
        _this.perspectiveGroup.append(_textGroup);
        var fontSize = _this.mapStyleFontSize;
        $.each(_this.areaMapCircle, function (name, value) {
          var _self = value;
          var _id = _self.attr('id');
          var _mapId = _id.split('-')[2];
          // 不存在才需要赋值
          if (!_this.areaMapText[_this.mapidPrefix + _mapId]) {
            _this.areaMapText[_this.mapidPrefix + _mapId] = _this.snap.paper.el('text', {
              id: 'areaMapName-' + _mapId,
              x: parseFloat(value.attr('cx')),
              y: parseFloat(value.attr('cy')) - _this.mapRatio * _this.textNameOffset,
              // 处于点的下方
              text: value.data('name'),
              'font-size': fontSize + 'px',
              fill: _this.mapStyle.textStyle.fill,
              fontFamily: 'Microsoft YaHei',
              textAnchor: 'middle',
              'pointer-events': 'none',
              dominantBaseline: 'middle'
            });
            _this.areaMapText[_this.mapidPrefix + _mapId].data('y', parseFloat(value.attr('cy')))
            //  添加到组
            _textGroup.append(_this.areaMapText[name]);
          }
        });
      },
      // 显示或者隐藏区域文字
      showOrHideNameText: function () {
        var _this = this;
        $.each(_this.areaMapText, function (name, value) {
          if (_this.isShowNameText) {
            value.attr({
              visibility: 'visible'
            });
          } else {
            value.attr({
              visibility: 'hidden'
            });
          }
        });
      },
      // 创建地图线
      createAreaMapLine() {
        var _this = this;
        // 创建线组
        if (!_this.areaMapLineGroup) {
          _this.areaMapLineGroup = _this.snap.paper.g().attr({
            id: 'js-areaMapLine-group'
          });
          _this.perspectiveGroup.append(_this.areaMapLineGroup);
        }
        $.each(_this.areaMapCircle, function (name, value) {
          var _self = value;
          var _id = _self.attr('id');
          var _mapId = _id.split('-')[2];
          let _cx = Number(value.attr('cx')), _cy = Number(value.attr('cy'))
          // 点
          let _coords = [[_cx, _cy]];

          let _middleCoords = [_cx, _cy]
          let _endCoords = [_cx, _cy]

          let _quadrant = 1
          if(_cx > _this.viewBox.width / 2 && _cy < _this.viewBox.height / 2) {
            _quadrant = 1

            // 中间点
            _middleCoords[0] = _cx - _this.mapRatio * _this.areaLineStyle.x1
            _middleCoords[1] = _cy + _this.mapRatio * _this.areaLineStyle.y

            // 结束点
            _endCoords[0] = _middleCoords[0] - _this.mapRatio * _this.areaLineStyle.x2
            _endCoords[1] = _middleCoords[1]

          } else if (_cx <= _this.viewBox.width / 2 && _cy < _this.viewBox.height / 2) {
            _quadrant = 2

            // 中间点
            _middleCoords[0] = _cx + _this.mapRatio * _this.areaLineStyle.x1
            _middleCoords[1] = _cy + _this.mapRatio * _this.areaLineStyle.y

            // 结束点
            _endCoords[0] = _middleCoords[0] + _this.mapRatio * _this.areaLineStyle.x2
            _endCoords[1] = _middleCoords[1]
          } else if (_cx < _this.viewBox.width / 2 && _cy >= _this.viewBox.height / 2) {
            _quadrant = 3

            // 中间点
            _middleCoords[0] = _cx + _this.mapRatio * _this.areaLineStyle.x1
            _middleCoords[1] = _cy - _this.mapRatio * _this.areaLineStyle.y

            // 结束点
            _endCoords[0] = _middleCoords[0] + _this.mapRatio * _this.areaLineStyle.x2
            _endCoords[1] = _middleCoords[1]
          } else {
            _quadrant = 4

            // 中间点
            _middleCoords[0] = _cx - _this.mapRatio * _this.areaLineStyle.x1
            _middleCoords[1] = _cy - _this.mapRatio * _this.areaLineStyle.y

            // 结束点
            _endCoords[0] = _middleCoords[0] - _this.mapRatio * _this.areaLineStyle.x2
            _endCoords[1] = _middleCoords[1]
          }
          _coords.push(_middleCoords);
          _coords.push(_endCoords)
          _this.areaMapLine[_this.mapidPrefix + _mapId] = _this.drawLine(_coords, _mapId, _quadrant)
          _this.areaMapLineGroup.append(_this.areaMapLine[_this.mapidPrefix + _mapId])
        })
      },
      // 创建圆
      createAreaMapCircleImg() {
        let _this = this;
        // 创建线组
        if (!_this.areaMapCircleImgGroup) {
          _this.areaMapCircleImgGroup = _this.snap.paper.g().attr({
            id: 'js-areaMapCircleImg-group'
          });
          _this.perspectiveGroup.append(_this.areaMapCircleImgGroup);
        }
        // 西城、东城、石景山
        // let _mapArr = ['110102', '110101', '110107']
        $.each(_this.areaMapCircle, function (name, value) {
          var _self = value;
          var _id = _self.attr('id');
          var _mapId = _id.split('-')[2];
          let _img = _this.snap.paper.el('image', {
            href: imgCircle,
            x: parseFloat(value.attr('cx')) - _this.circleImgW * _this.mapRatio / 2,
            y: parseFloat(value.attr('cy')) - _this.circleImgH * _this.mapRatio / 2,
            width: _this.circleImgW * _this.mapRatio,
            height: _this.circleImgH * _this.mapRatio,
            'pointer-events': 'none',
            display: 'none'
          }).data('mapid', _mapId)
          _this.areaMapCircleImg[_this.mapidPrefix + _mapId] = _img;
          _this.areaMapCircleImgGroup.append(_img)
        })
      },
      // 设置区域名称位置
      setNameTextPosition: function (id, coords) {
        var _this = this;
        // 状态设计模式
        var state = {
          // 朝阳区
          id110105: function () {
            _this.areaMapText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] - _this.mapRatio * _this.textNameOffset,
              textAnchor: 'start'
            });
          },
          // 西城区
          id110102: function () {
            _this.areaMapText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] - _this.mapRatio * _this.textNameOffset,
              textAnchor: 'start'
            });
          },
          // 东城区
          id110101: function () {
            _this.areaMapText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] - _this.mapRatio * _this.textNameOffset,
              textAnchor: 'start'
            });
          },
          // 石景山
          id110107: function () {
            _this.areaMapText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] - _this.mapRatio * _this.textNameOffset,
              textAnchor: 'end'
            });
          },
          // 丰台区
          id110106: function () {
            _this.areaMapText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] - _this.mapRatio * _this.textNameOffset,
              textAnchor: 'end'
            });
          }
        };
        // 生成线
        if (Object.prototype.toString.call(state['id' + id]) === '[object Function]') {
          state['id' + id]();
        }
      },
      // 设置数据名称位置
      setDataTextPosition: function (id, coords) {
        var _this = this;
        // 状态设计模式
        var state = {
          // 朝阳区
          id110105: function () {
            _this.areaMapDataText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] + _this.mapRatio * _this.textNameOffset,
              textAnchor: 'start'
            });
          },
          // 西城区
          id110102: function () {
            _this.areaMapDataText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] + _this.mapRatio * _this.textNameOffset,
              textAnchor: 'start'
            });
          },
          // 东城区
          id110101: function () {
            _this.areaMapDataText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] + _this.mapRatio * _this.textNameOffset,
              textAnchor: 'start'
            });
          },
          // 石景山
          id110107: function () {
            _this.areaMapDataText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] + _this.mapRatio * _this.textNameOffset,
              textAnchor: 'end'
            });
          },
          // 丰台区
          id110106: function () {
            _this.areaMapDataText[_this.mapidPrefix + id].attr({
              x: coords[0] + _this.mapRatio * _this.textNameOffsetLine,
              y: coords[1] + _this.mapRatio * _this.textNameOffset,
              textAnchor: 'end'
            });
          }
        };
        // 生成线
        if (Object.prototype.toString.call(state['id' + id]) === '[object Function]') {
          state['id' + id]();
        }
      },
      // 绘制线
      drawLine: function (coords, id, quadrant) {
        var _this = this;
        // 获取路径
        var _path = _this.getLinePathByCoord(coords)
        // 绘制线
        return _this.snap.paper.el('path', {
          d: _path,
          id: 'js-mapid-' + id + '-mapline',
          // stroke: _strokeGradient,
          stroke: 'rgba(255,91,21,0.8)',
          strokeWidth: _this.highLineStrokeWidth * _this.mapRatio,
          fill: 'none',
          'pointer-events': 'none',
          display: 'none'
        }).data('mapid', id).data('quadrant', quadrant)
      },
      /**
       * 通过坐标获取对应的路径
       * */
      getLinePathByCoord (coords) {
        var _path = '';
        coords.forEach(function (item, index) {
          switch (index) {
            // 开始
            case 0:
              _path = 'M' + item[0] + ' ' + item[1];
              break;
            default :
              _path = _path + 'L' + item[0] + ' ' + item[1];
              break
          }
        })
        return _path
      },
      // 更新数据
      updateData: function (dataSource, callback) {
        var _this = this;

        // 如果数据为空，则返回
        if (!dataSource || dataSource.length === 0) {
          return
        }

        var dataSource = dataSource;
        // 更新对象, 判断对象是不是等于
        if (dataSource && $.type(dataSource) == 'array') {
          _this.areaMapDataSource = dataSource;
        }

        let _hasProp = false;
        for (let prop in _this.areaMap) {
          _hasProp = true;
          break
        }
        // 如果没有任何属性跳出函数
        if (!_hasProp) {
          // 调用初始化方法
          _this.initial()
          return;
        }

        // 清空数据值
        _this.areaMapData = {}

        $.each(_this.areaMapDataText, function (index, value) {
          value.group.attr({
            visibility: 'hidden'
          })
        })
        // 循环数据
        $.each(_this.areaMapDataSource, function (index, value) {
          // 如果不存在 跳出本次循环
        //   if(!_this.areaMap[_this.mapidPrefix + value.mapId]) {
        //     return true
        //   }
          // 更新所有数据对象
          _this.areaMapData[_this.mapidPrefix + value.mapId] = value;
          // 是否生成数据文本
          if(_this.generateDataText) {
            // 如果展现的是数值，则更新对应的数值，否则更新占比
            if (_this.isShowDataText) {
              if (_this.areaMapDataText[_this.mapidPrefix + value.mapId]) {
                // 更新所有数据对象
                _this.areaMapDataText[_this.mapidPrefix + value.mapId].group.attr({
                  visibility: 'visible'
                })
                // 文本
                _this.areaMapDataText[_this.mapidPrefix + value.mapId].text.attr({
                  text: value.value,
                  fontSize: _this.mapStyleDataFontSize
                })
              }
            } else {
              if (_this.areaMapDataText[_this.mapidPrefix + value.mapId]) {
                _this.areaMapDataText[_this.mapidPrefix + value.mapId].group.attr({
                  visibility: 'visible'
                })
                // 更新所有数据对象
                // 更新圆的颜色
                _this.areaMapDataText[_this.mapidPrefix + value.mapId].circle.attr({
                  // fill: '#ff0909'
                  fill: value.value > 0 ? '#ff0909' : '#42a64e'
                })
                _this.areaMapDataText[_this.mapidPrefix + value.mapId].arrow.attr({
                  href: value.value > 0 ? iconArrowUp : iconArrowDown
                })
                // 文本
                _this.areaMapDataText[_this.mapidPrefix + value.mapId].text.attr({
                  text: value.value + '%',
                  // fill: value.value > 0 ? '#bd1c12' : '#fff'
                  fill: '#fff'
                })
               /* let _textWidth = _this.areaMapDataText[_this.mapidPrefix + value.mapId].text.getBBox().width
                // 矩形
                _this.areaMapDataText[_this.mapidPrefix + value.mapId].rect.attr({
                  width: (53 + 15) * _this.mapRatio + _textWidth
                })*/

                /*_this.areaMapDataText[_this.mapidPrefix + value.mapId].group.attr({
                  transform: 'translateX(' + -_this.areaMapDataText[_this.mapidPrefix + value.mapId].group.getBBox().width / 2 + ')'
                })*/
              }
            }
          }
        });
        // 设置最小值
        _this.setMinValue()
        // 设置最大值
        _this.setMaxValue()
        // 设置图例数据
        _this.setLegendData()
        // 修改每个数据对应的颜色
        _this.mendAreaMapFillColor();
        // 设置每个区域的颜色
        _this.setAreaMapFillColor();
        // 执行回调函数
        if (Object.prototype.toString.call(callback) === '[object Function]') {
          callback()
        }
        // 更新数据的回调函数
        if (Object.prototype.toString.call(_this.updateCallback) == '[object Function]') {
          _this.updateCallback()
        }
      },
      /**
       * 设置图例数据
       * */
      setLegendData () {
        let _legendData = []
        // 如果差距小于等于2则说明总共不超过3个数，摆4个则不合适了
        if((Math.ceil(this.areaMapMaxValue) - Math.ceil(this.areaMapMinValue)) <= 2) {
            for(let i = Math.ceil(this.areaMapMaxValue); i>= Math.ceil(this.areaMapMinValue); i--) {
              _legendData.push(i)
            }
        } else {
          _legendData.push(Math.ceil(this.areaMapMaxValue))
          _legendData.push(Math.ceil(this.areaMapMinValue + (this.areaMapMaxValue + this.areaMapMinValue) * 2 / 3))
          _legendData.push(Math.ceil(this.areaMapMinValue + (this.areaMapMaxValue + this.areaMapMinValue) * 1 / 3))
          _legendData.push(Math.ceil(this.areaMapMinValue))
        }
        // 如果只有一个数，则再放一个最小值，至少保证图例有两条数据
        if(_legendData.length == 1) {
          _legendData.push( Math.ceil(this.areaMapMinValue))
        }
        // 赋值图例数据
        this.legendData = _legendData
      },
      /**
       * 根据id设置对应的活跃区域
       * */
      setActiveMapById (id) {
        let _this = this;
        let _mapArea = this.areaMap[this.mapidPrefix + id]
        if(_mapArea) {
          if (Array.isArray(_mapArea)) {
            _mapArea.forEach(function (item, index) {
              _this.setActiveMapArea(item)
            })
          } else {
            _this.setActiveMapArea(_mapArea)
          }
        }
      },
      // 单条路径事件
      bindAreaMapItemInteraction: function (item, name) {
        var _this = this;
        // mapid
        var _mapid = item.data('mapid');
        //为每个path绑定事件
        item.click(function (event) {
          var event = event || window.event;
          var _that = this;
          //  阻止事件冒泡
          event.stopPropagation();
          console.log('点击了' + _mapid)

          // 数据
          var _data = _this.areaMapData[_this.mapidPrefix + _mapid];
          let _name = _this.areaMapText[_this.mapidPrefix + _mapid] ? _this.areaMapText[_this.mapidPrefix + _mapid].attr('text') : ''
           // 是否能下钻街乡镇
          if(_this.isXzJxz && _mapid.length > 8) {
            // 激活区域
            if(!_data || !_data.value ||_data.value =='0.0' ){
                //如果街乡镇数据为0，则不可点击
                return;
            }
            _this.setActiveMapArea(_that);
          }
          // 点击之后的回调函数
          if (Object.prototype.toString.call(_this.clickCallback) == '[object Function]') {
            // 如果点击的区并且数据为0，则跳出函数
            // if(_mapid.length < 8 && (_data.value <= 0 || !_data)) {
            if(_this.heatMapCanClick){
            	if(_mapid.length < 8 && (!_data) ) {
            	   return
            	}
            }else{
            	if(_mapid.length < 8 && (!_data || !_data.value ||_data.value =='0.0' )) {
            	  return
            	}
            }
            _this.clickCallback(event, _that, _data, _name);
          }
        })
      },
      // 取消激活地图区域
      cancelActiveMapArea: function () {
        var _this = this;
        // 是否生成数据文本
        if(_this.generateDataText) {
          // 展现数据
          _this.areaMapDataTextGroup.attr({
            display: 'block'
          })
        }
        // 展现所有的文本
        $.each(_this.areaMapText, function(key, value) {
          value.attr({
            display: 'block'
          })
        })
        // 如果有激活条目
        if (_this.activeAreaMap) {
          // 线条隐藏
          _this.areaMapLine[_this.mapidPrefix + _this.activeAreaMap.data('mapid')] && _this.areaMapLine[_this.mapidPrefix + _this.activeAreaMap.data('mapid')].attr({
            display: 'none'
          })
          // 区域圆图片隐藏
          _this.areaMapCircleImg[_this.mapidPrefix + _this.activeAreaMap.data('mapid')] && _this.areaMapCircleImg[_this.mapidPrefix + _this.activeAreaMap.data('mapid')].attr({
            display: 'none'
          })
          // 清空激活对象
          _this.activeAreaMap = null;
          // 设置每个区域的颜色
          _this.setAreaMapFillColor();
        }
      },
      // 设置激活地图区域
      setActiveMapArea: function (target) {
        var _this = this;
        // 如果生成数据文本
        if(_this.generateDataText) {
          // 隐藏数据
          _this.areaMapDataTextGroup.attr({
            display: 'none'
          })
        }
        // 如果有激活条目
        if (_this.activeAreaMap) {
          let _activeMapId = _this.activeAreaMap.data('mapid');
          if(_this.overlapStreet.indexOf(_activeMapId)>-1){
            _activeMapId = _this[_activeMapId].code;
          }
          // 置灰
          if (Array.isArray(_this.areaMap[_this.mapidPrefix + _activeMapId])) {
            _this.areaMap[_this.mapidPrefix + _activeMapId].forEach(function (item, index) {
              item.attr({
                fill: _this.gray
              });
            })
          } else {
            _this.areaMap[_this.mapidPrefix + _activeMapId].attr({
              fill: _this.gray
            });
          }
           // 文本隐藏
            _this.areaMapText[_this.mapidPrefix + _this.activeAreaMap.data('mapid')] && _this.areaMapText[_this.mapidPrefix + _this.activeAreaMap.data('mapid')].attr({
                display: 'none'
            });
            //重叠区域增加代码
            if(_this.overlapOldStreet.indexOf(_activeMapId)>-1){
                //之前激活的区域是重叠区域，则隐藏此重叠区域所有文本
                _this.areaMapText[_this.mapidPrefix +_this[_activeMapId].code] && _this.areaMapText[_this.mapidPrefix +_this[_activeMapId].code].attr({
                    display: 'none'
                })
                _this.areaMapText[_this.mapidPrefix +_activeMapId] && _this.areaMapText[_this.mapidPrefix +_activeMapId].attr({
                    display: 'none'
                })
            }
          // 线条隐藏
          _this.areaMapLine[_this.mapidPrefix + _this.activeAreaMap.data('mapid')] && _this.areaMapLine[_this.mapidPrefix + _this.activeAreaMap.data('mapid')].attr({
            display: 'none'
          })
          // 圆图片隐藏
          _this.areaMapCircleImg[_this.mapidPrefix + _this.activeAreaMap.data('mapid')] && _this.areaMapCircleImg[_this.mapidPrefix + _this.activeAreaMap.data('mapid')].attr({
            display: 'none'
          })
          // 激活
          let _targetId = target.data('mapid');
          if(_this.overlapStreet.indexOf(_targetId)>-1){
            _targetId = _this[_targetId].code;
          }
          if (Array.isArray(_this.areaMap[_this.mapidPrefix + _targetId])) {
            _this.areaMap[_this.mapidPrefix + _targetId].forEach(function (item, index) {
              item.attr({
                fill: _this.mapStyle.areaMap.activeFill
              });
            })
          } else {
            _this.areaMap[_this.mapidPrefix + _targetId].attr({
              fill: _this.mapStyle.areaMap.activeFill
            });
          }
          // 展现文本
          _this.areaMapText[_this.mapidPrefix + _targetId] && _this.areaMapText[_this.mapidPrefix + _targetId].attr({
            display: 'block'
          })
          //重叠区域增加代码
            if(_this.overlapOldStreet.indexOf(_targetId)>-1){
                //要点击的区域是重叠区域，则显示此重叠区域文本
                _this.areaMapText[_this.mapidPrefix +_this[_targetId].code] && _this.areaMapText[_this.mapidPrefix +_this[_targetId].code].attr({
                    display: 'block'
                })
                _this.areaMapText[_this.mapidPrefix +_targetId] && _this.areaMapText[_this.mapidPrefix +_targetId].attr({
                    display: 'block'
                })
            }
          // 初次加载
        } else {
          $.each(_this.areaMap, function (key, value) {
            if (Array.isArray(value)) {
              value.forEach(function (item, index) {
                _this.setSignleActiveMapArea(item, target)
              })
            } else {
              _this.setSignleActiveMapArea(value, target)
            }
          })
        }
        // 赋值
        _this.activeAreaMap = target

        // 展现图形圆圈
        _this.areaMapCircleImg[_this.mapidPrefix + _this.activeAreaMap.data('mapid')].attr({
          display: 'block'
        })

        let _areaMapLine = _this.areaMapLine[_this.mapidPrefix + _this.activeAreaMap.data('mapid')]

        _areaMapLine && _areaMapLine.attr({
          display: 'block'
        })
        // 点击之后的回调函数
        if (Object.prototype.toString.call(_this.activeCallback) == '[object Function]') {
          _this.activeCallback(_areaMapLine, $('#' + _areaMapLine.attr('id')));
        }
      },
      // 单独设置某个条目
      setSignleActiveMapArea: function (item, target) {
        var _this = this;
        let _mapid = item.data('mapid')
        let _targetId = target.data('mapid');//_targetId可能是新增重叠街乡镇
        if(this.overlapStreet.indexOf(_targetId)>-1){
            _targetId = this[_targetId].code;
        }
        if (item.data('mapid') === _targetId) {
            item.attr({
                fill: _this.mapStyle.areaMap.activeFill
            });
            if(_this.overlapOldStreet.indexOf(_targetId)>-1){
                //当前点击的区域是重叠区域，则该重叠区域所有的街乡镇名称都显示
                _this.areaMapText[_this.mapidPrefix +_this[_targetId].code] && _this.areaMapText[_this.mapidPrefix +_this[_targetId].code].attr({
                    display: 'block'
                })
            }
        } else {
            item.attr({
                fill: _this.gray
            });
            // 隐藏文本
            _this.areaMapText[_this.mapidPrefix + _mapid] && _this.areaMapText[_this.mapidPrefix + _mapid].attr({
                display: 'none'
            })

            if(_this.overlapOldStreet.indexOf(_mapid)>-1){
                //如果需要隐藏的区域是重叠区域
                _this.areaMapText[_this.mapidPrefix + _this[_mapid].code] && _this.areaMapText[_this.mapidPrefix + _this[_mapid].code].attr({
                    display: 'none'
                })
            }
        }
      },
      // 增加交互效果
      addAreaMapInteraction: function () {
        var _this = this;
        $.each(_this.areaMap, function (name, value) {
          // 是区域块，需要进行循环，为每个区域都绑定事件
          if (Array.isArray(value)) {
            value.forEach(function (item, index) {
              // 单条路径事件
              _this.bindAreaMapItemInteraction(item, name)
            })
          } else {
            // 单条路径事件
            _this.bindAreaMapItemInteraction(value, name)
          }
        });
      },
      // 设置单个区域的颜色
      setAreaMapItemColor: function (item) {
        var _this = this;
        var _mapid = item.data('mapid');
        var _areaCount = 0;
        // 数据
        var _data = _this.areaMapData[_this.mapidPrefix + _mapid];
        if (_data) {
          _areaCount = Math.abs(_data.value);
          // 判断数据量的大小，决定是否置灰 (小于最小值或者大于最大值)
          if (_areaCount < _this.areaMapMinValue || _areaCount > _this.areaMapMaxValue) {
            item.attr({
              fill: _this.gray,
              stroke: _this.grayStroke
            });
          } else {

            // let _color = Color(_data.fillColor).darkenByRatio(0.3)
            let _color = Color(_data.fillColor)
            let _gradient = _this.snap.paper.gradient('r(0.5,0.5,0.5)' + _color.lightenByRatio(0.1) + '-' + _color.darkenByRatio(0.2))
            // 不置灰就用data里保留的颜色
            item.attr({
              fill: _gradient,
              stroke: _this.mapStyle.areaMap.stroke
            });
          }
        } else {
          let _color = Color(_this.areaMapColor[0])
          let _gradient = _this.snap.paper.gradient('r(0.5,0.5,0.5)' + _color.lightenByRatio(0.1) + '-' + _color.darkenByRatio(0.2))
          item.attr({
            fill: _gradient,
            stroke: _this.mapStyle.areaMap.stroke
          });
        }
      },
      // 销毁函数
      destory: function () {
        var _this = this;
        // 重置变量
        _this.scale = 1
        // 区域背景对象置为空
        _this.areaMapBj = null
        // 地图区域
        _this.areaMap = {}
        _this.areaMapDataSource = [] // 地图数据
        _this.areaMapText = {}  // 地图文本
        _this.areaMapData = {} //地图数据
        _this.areaMapCircle = {} // 中心点
        // 数据文本数组
        _this.areaMapDataTextGroup = null
        _this.areaMapCircleImgGroup = null // circle图形组
        _this.areaMapCircleImg = {} // 区域圆心图形
        _this.areaMapLineGroup = null   // 线条组
        _this.areaMapLine = {} // 地图线条
        // 地图高亮线组
        _this.areaMapHighLineGroup = null
        // 地图高亮线
        _this.areaMapLine = {}
        _this.activeAreaMap = null // 激活的区域
        _this.highLightAreaMap = null // 高亮的区域
        // 图例置空
        _this.legendData = []
      }
    },
    // 更新前
    updated() {
    },
    // 初始化后
    mounted() {
      // 调用初始化方法
      this.initial()
      // 绑定事件
    //   this.bindEvent()
    },
    // 创建之后
    created() {
    },
    // 销毁
    destoryed() {
    }
  }
</script>

<style lang="less" type="text/less" scoped>
    
    /*** 地图内容 ***/
    .fd-map-wrapper {
        ul{
            list-style-type: none;
        }
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        /*** 地图拖拽容器 ***/
        .fd-map-drag-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            /*** 地图绘制容器 ***/
            .fd-map-render-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
        /* 图例 */
        .fd-legend-wrapper {
            display: flex;
            position: absolute;
            bottom: 0.75rem;
            left: 0.2rem;
            width: 0.335rem;
            height: 1.075rem;
            &.fd-has-time-line {
                bottom: 0.35rem;
            }
            /* 文本列表 */
            .fd-text-list {
                display: flex;
                flex-direction: column;
                /*width: 0.25rem;*/
                flex: 1;
                margin-left: 0.05rem;
                height: 100%;
                justify-content: space-between;
                .fd-text {
                    font-size:0.11rem;
                    line-height:0.1rem;
                    font-family:"Microsoft YaHei";
                    // color: #ff6f36;
                    // &:first-child {
                    //     color: #ff1e1e;
                    // }
                    // &:nth-child(2) {
                    //     color: #ff4f2d;
                    // }
                    // &:nth-child(3) {
                    //     color: #ff9341;
                    // }
                    // &:last-child {
                    //     color: #ffd154;
                    // }
                }
                &.three {
                    .fd-text {
                        // &:nth-child(2) {
                        //     color: #ff7f3d;
                        // }
                    }
                }
            }
            /* 图例 */
            .fd-legend {
                /*flex: 1;*/
                width: 0.085rem;
                height: 1.065rem;
            }
            /*** 图例的标题 ***/
            .fd-legend-tit {
                position: absolute;
                left: 0;
                top: 100%;
                margin-top: 0.03rem;
                width: 1rem;
                font-size:0.12rem;
                font-family:"Microsoft YaHei";
                // color: #ffd154;
                text-align: left;
                /*transform: translateX(-50%);*/
            }
        }
    }
</style>
